<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted } from 'vue'

import { clear, result } from './data'
import { imagePath } from '@/libs/file-utils'
import { backToMain } from '@/libs/common';

const img_bg = imagePath('quiz/tarot/bg.jpg')

result.value ? onUnmounted(clear) : backToMain()
</script>

<template>
  <PageWrapper name="quiz-tarot-result">
    <div
      v-if="result"
      class="wrapper"
      :style="{ backgroundImage: img_bg }"
    >
      <div class="title">塔罗牌占卜</div>
      <div class="tip">心中默念你想知道的事</div>

      <div class="card">
        <div>抽牌：{{ result.tarotCards[0].name }}（{{ result.tarotCards[0].position }}）</div>
        <div>核心提示：{{ result.tarotCards[0].description }}</div>
        <div>{{ result?.description }}</div>
      </div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  display: inline-block;

  background-size: cover;
  background-position: center top;

  .title {
    margin-top: 96rpx;

    color: #fff;
    text-align: center;
    font-size: 80rpx;
    line-height: 80rpx;
  }

  .tip {
    margin-top: 24rpx;

    color: #F9E1FF;
    text-align: center;
    font-size: 32rpx;
    line-height: 58rpx;
  }

  .card {
    width: 686rpx;
    height: calc(100% - 350rpx);

    margin: 16rpx auto;

    box-sizing: border-box;
    padding: 32rpx;

    border-radius: 16rpx;
    border: 4rpx solid #614F70;
    background-color: rgba(47, 26, 64, .63);

    color: #fff;
    font-size: 40rpx;
    line-height: 48rpx;

    overflow-y: auto;
    touch-action: pan-y;
  }
}
</style>